<template>
	<view class="emptyTips" v-if="list.length == 0" :class="cName">
		<block v-if="loading">
			<div class="dotGroup">
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
			</div>
		</block>
		<block v-else>
			<text class="iconfont icon-wushuju"></text>
			<view class="smallTip">{{tips}}</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: "emptyTips",
		props: {
			tips: {
				type: String ,
				default: "Sorry,暂无数据~"
			},
			list : {
				type : Array ,
				default : function(e){
					return [] ;
				}
			},
			loading : {
				type : Boolean ,
				default : false 
			},
			type : {
				type : String ,
				default : '' 
			}
		},
		
		computed:{
			cName : function(e){
				return this.type ;
			},
		},
		
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less" scoped>

.dotGroup{
	padding: 100px 0;
	text-align: center;
	.dot{
		display: inline-block;
		width: 10px;
		height: 10px;
		background-color: rgba(255, 198, 37);
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
		margin: 0 4px;
		animation:scale infinite 0.7s ;
		&+.dot{
			background-color: rgba(255, 198, 37,0.9);
			animation-delay: 0.2s ;
			&+.dot{
				background-color: rgba(255, 198, 37,0.8);
				animation-delay: 0.3s ;
				&+.dot{
					background-color: rgba(255, 198, 37,0.7);
					animation-delay: 0.4s ;
				}
			}
		}
	}
}

@keyframes scale{
	0%,100%{
		transform: scale(1);
		opacity: 1;
	}	
	50%{
		opacity: 0.5;
		transform: scale(0.2);
	}
}

.emptyTips{
	box-sizing:border-box;
	display: block;
	width: 100%;
	text-align: center;
	padding:100px 30px;
	background-color: #fff;
	color: #8799a3;
	font-size: 14px;
	height: 300px;
	&.small{
		padding:10px 30px;
		min-height: 0;
	}
	.img{
		display: block;
		width: 50px;
		height: 50px;
		margin: 10px auto;
	}
	.iconfont{
		font-size: 48px;
		color: #d0d0d0;
		&+view{
			margin-top: 15px;
		}
	}
}
</style>
